<template>
	<div>
		<div class="box" v-if="is_show">
			<div class="navs">

				<div :class="'navs_list ' + (0 == navIndex?'active':'')"
										@click="changeNav(item={id:0})">
										<i v-if="0 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/spr.svg#icon_dtfl_rm_0--svgSprite:all"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_dtfl_rm_1.png" />
										<span>{{ $t('l_remen') }}</span>
									</div>
									<div :class="'navs_list ' + (2 == navIndex?'active':'')"
										@click="changeNav(item={id:2})">
										<i v-if="2 != navIndex" class="icons" style="font-size:32px;"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/spr.svg#icon_dtfl_dz_0--svgSprite:all"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_dtfl_dz_1.png" />
										<span>{{ $t('l_dianzi') }}</span>
									</div>
									<div :class="'navs_list ' + (7 == navIndex?'active':'')"
										@click="changeNav(item={id:7})">
										<i v-if="7 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/icon.svg#icon_game_menu_active_1--sprite"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_game_menu_active_1.png" />
										<span>{{ $t('l_qipai') }}</span>
									</div>
									<div :class="'navs_list ' + (6 == navIndex?'active':'')"
										@click="changeNav(item={id:6})">
										<i v-if="6 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/spr.svg#icon_dtfl_by_0--svgSprite:all"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_dtfl_by_1.png" />
										<span>{{ $t('l_buyu') }}</span>
									</div>
									<div :class="'navs_list ' + (1 == navIndex?'active':'')"
										@click="changeNav(item={id:1})">
										<i v-if="1 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/icon.svg#icon_game_menu_active_4--sprite"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_game_menu_active_8.png" />
										<span>{{ $t('l_zhenren') }}</span>
									</div>
									<div :class="'navs_list ' + (4 == navIndex?'active':'')"
										@click="changeNav(item={id:4})">
										<i v-if="4 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/icon.svg#icon_game_menu_active_5--sprite"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_game_menu_active_4.png" />
										<span>{{ $t('l_tiyu') }}</span>
									</div>
									<div :class="'navs_list ' + (3 == navIndex?'active':'')"
										@click="changeNav(item={id:3})">
										<i v-if="3 != navIndex" class="icons"><svg viewBox="0 0 20.413 12.425"
												width="1em" height="1em" fill="currentColor" aria-hidden="true"
												focusable="false">
												<use xlink:href="/icons/icon.svg#icon_game_menu_active_8--sprite"></use>
											</svg></i>
										<img v-else src="/icons/active/icon_game_menu_active_5.png" />
										<span>{{ $t('l_caipiao') }}</span>
									</div> 

				<!-- <div :class="'navs_list ' + (item.id == navIndex?'active':'')" v-for="(item,index) in navs" :key="index" @click="changeNav(item)">
					<i v-if="item.id != navIndex" class="icons">
						<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
							<use :xlink:href="'/icons/icon.svg#'+item.key+'--sprite'"></use>
						</svg>
					</i>
					<img v-else :src="'/icons/active/'+item.key+'.png'" />
					<span>{{item.name}}</span>
				</div> -->
			</div>
			<div class="toulog"   @click="goRecord('1')">
				<i class="icons">
					<svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
						<use xlink:href="/icons/icon.svg#icon_sy_zc_tzjl--sprite"></use>
					</svg>
				</i>
				<span>{{$t('h_pcdrawer.title1')}}</span>
			</div>
			<div class="market">
				<div class="items" @click="golive">
					<img src="/icons/index/btn_sy_zc_hd.02490a50643aaf4c82eb.png">
					<span>{{$t('h_pcdrawer.title2')}}</span>
				</div>
				<!-- <div class="items" @click="openRenwU">
					<img src="/icons/index/btn_sy_zc_rw.cc5ad3f56093a63822b7.png">
					<span>{{$t('h_pcdrawer.title3')}}</span>
				</div>
				<div class="items" @click="goFanshui">
					<img src="/icons/index/btn_sy_zc_fs.d9080bec0a9082e74b4d.png">
					<span>{{$t('h_pcdrawer.title4')}}</span>
				</div> -->
				<!-- <div class="items" @click="goreward">
					<img src="/icons/index/btn_sy_zc_jl.c1d58b5ba7ada58b76f8.png">
					<span>奖励</span>
				</div> -->
				<div class="itemsrow" @click="gopromotion" style="    width: 100%;">
					<img src="/icons/index/btn_sy_zc_tgzq.f4e89529d5469d5b00a6.png">
					<span>{{$t('h_pcdrawer.title5')}}</span>
				</div>
			</div>
			<div class="abouts">
				<div class="item" style="cursor: pointer;" @click="xianlu = true">
					<div class="left">
						<div class="leftcon"  v-if="baseMS<=1000">
							<div style="background: rgb(4, 190, 2);"></div>
							<div style="background: rgb(4, 190, 2);"></div>
							<div style="background: rgb(4, 190, 2);"></div>
						</div>
						<div class="leftcon" v-if="baseMS>1000 && baseMS<=3000">
							<div style="background: rgb(255, 170, 9);"></div>
							<div style="background: rgb(255, 170, 9);"></div>
							<div style="background: rgb(41, 53, 72);"></div>
						</div>
						<div class="leftcon" v-if="baseMS>3000">
							<div style="background: rgb(234, 78, 61);"></div>
							<div style="background: rgb(41, 53, 72);"></div>
							<div style="background: rgb(41, 53, 72);"></div>
						</div>
						<div class="leftcontext" style="color: rgb(4, 190, 2);"  v-if="baseMS<=1000">{{baseMS}}MS</div>
						<div class="leftcontext" style="color: rgb(255, 170, 9);"  v-if="baseMS>1000 && baseMS<=3000">{{baseMS}}MS</div>
						<div class="leftcontext" style="color: rgb(234, 78, 61);" v-if="baseMS>3000">{{baseMS}}MS</div>
					</div>
					<div class="right">
						{{$t('h_pcdrawer.title6')}}{{baseName}}
						<i style="display: inline-flex; justify-content: center; align-items: center;">
							<svg viewBox="0 0 12 7" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#comm_icon_sort--sprite"></use>
							</svg>
						</i>
					</div>
				</div>
				<div class="items" @click="is_lang=true">
					<div class="i">
						<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_sy_zc_lang--sprite"></use>
							</svg></i>
					</div>
					<span>	{{langName}}</span>
				</div>
				<div class="items" @click="godownloadapp">
					<div class="i">
						<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_sy_zc_xz--sprite"></use>
							</svg></i>
					</div>
					<span>{{$t('h_pcdrawer.title7')}}</span>
				</div>
				<div class="items" @click="gokefu">
					<div class="i">
						<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_sy_zc_lxkf--sprite"></use>
							</svg></i>
					</div>
					<span>{{$t('h_pcdrawer.title8')}}</span>
				</div>
				<!-- <div class="items">
					<div class="i">
						<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_sy_zc_cjwt--sprite"></use>
							</svg></i>
					</div>
					<span>常见问题</span>
				</div> -->
				<div class="items" @click="goAbout">
					<div class="i">
						<i class="icons"><svg viewBox="0 0 20.413 12.425" width="1em" height="1em" fill="currentColor"
								aria-hidden="true" focusable="false">
								<use xlink:href="/icons/icon.svg#icon_sy_zc_gywm--sprite"></use>
							</svg></i>
					</div>
					<span>{{$t('h_pcdrawer.title9')}}</span>
				</div>
			</div>
		</div>
		<div class="regBox" v-if="is_lang">
			<div class="conbox">
				<i aria-label="图标: close" class="close" @click="is_lang = false">
					<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" data-icon="close" fill="currentColor" aria-hidden="true" focusable="false" class="">
						<g id="comm_icon_x" transform="translate(-1209.5 -160.5)">
							<path id="Line_14" data-name="Line 14" d="M14,15a1,1,0,0,1-.707-.293l-14-14a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l14,14A1,1,0,0,1,14,15Z" transform="translate(1210.5 161.5)"></path>
							<path id="Line_15" data-name="Line 15" d="M0,15a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414l14-14a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-14,14A1,1,0,0,1,0,15Z" transform="translate(1210.5 161.5)"></path>
						</g>
					</svg>
				</i>
				<div class="title">{{$t('l_xuanzeyuyan')}}</div>
				<ul>
					<li v-for="(item,index) in langList" :key="index" @click="changeLang(item.key,item.name)" >
						<div class="zzcleft">
							<div class="zzctext3">{{item.name}}</div>
						</div>
						<div class="zzcright">
							<div class="Aw1MMVHkyunO1popQHyi l_Nn6lrPLPblbHbiULsf" v-if="item.name == langName">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#music_success--sprite"></use>
									</svg>
								</i>
							</div>
							<div class="Aw1MMVHkyunO1popQHyi" v-else></div>
						</div>
					</li>
					<!-- <div class="zzcbtn">
						<div class="zzcbtn2" style="flex: 1;margin:15px 0;">确 定</div>
					</div> -->
				</ul>
			</div>
		</div>
		<div class="regBox" v-if="xianlu">
			<div class="conbox">
				<i aria-label="图标: close" class="close" @click="xianlu = false">
					<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" data-icon="close" fill="currentColor" aria-hidden="true" focusable="false" class="">
						<g id="comm_icon_x" transform="translate(-1209.5 -160.5)">
							<path id="Line_14" data-name="Line 14" d="M14,15a1,1,0,0,1-.707-.293l-14-14a1,1,0,0,1,0-1.414,1,1,0,0,1,1.414,0l14,14A1,1,0,0,1,14,15Z" transform="translate(1210.5 161.5)"></path>
							<path id="Line_15" data-name="Line 15" d="M0,15a1,1,0,0,1-.707-.293,1,1,0,0,1,0-1.414l14-14a1,1,0,0,1,1.414,0,1,1,0,0,1,0,1.414l-14,14A1,1,0,0,1,0,15Z" transform="translate(1210.5 161.5)"></path>
						</g>
					</svg>
				</i>
				<div class="title">{{$t('h_pcdrawer.title10')}}</div>
				<ul>
					<li v-for="(item,index) in xl" :key="index" @click="changeXl(item)" v-if="item.ms != -1">
						<div class="zzcleft">
							<div class="WrpyHI6m9kBJOubBqrlt" v-if="item.ms<=1000">
								<div style="background: rgb(4, 190, 2);"></div>
								<div style="background: rgb(4, 190, 2);"></div>
								<div style="background: rgb(4, 190, 2);"></div>
							</div>
							<div class="WrpyHI6m9kBJOubBqrlt"  v-if="item.ms>1000 && item.ms<=3000">
								<div style="background: rgb(255, 170, 9);"></div>
								<div style="background: rgb(255, 170, 9);"></div>
								<div style="background: rgb(41, 53, 72);"></div>
							</div>
							<div class="WrpyHI6m9kBJOubBqrlt" v-if="item.ms>3000">
								<div style="background: rgb(234, 78, 61);"></div>
								<div style="background: rgb(41, 53, 72);"></div>
								<div style="background: rgb(41, 53, 72);"></div>
							</div>
							<div class="zzctext3">{{$t('h_pcdrawer.title6')}}{{item.name}}</div>
						</div>
						<div class="zzcright">
							<div class="zzctext3" style="color: rgb(4, 190, 2);" v-if="item.ms<=1000">{{item.ms}}MS</div>
							<div class="zzctext3" style="color: rgb(255, 170, 9);" v-if="item.ms>1000 && item.ms<=3000">{{item.ms}}628MS</div>
							<div class="zzctext3" style="color: rgb(234, 78, 61);" v-if="item.ms>3000">{{item.ms}}628MS</div>
							<div class="Aw1MMVHkyunO1popQHyi l_Nn6lrPLPblbHbiULsf" v-if="item.name == baseName">
								<i style="display: inline-flex; justify-content: center; align-items: center;">
									<svg viewBox="0 0 20 15" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
										<use xlink:href="/icons/icon.svg#music_success--sprite"></use>
									</svg>
								</i>
							</div>
							<div class="Aw1MMVHkyunO1popQHyi" v-else></div>
						</div>
					</li>
					<!-- <div class="zzcbtn">
						<div class="zzcbtn2" style="flex: 1;margin:15px 0;">确 定</div>
					</div> -->
				</ul>
			</div>
		</div>
		<newmanBox v-if="newmanb" ref="newmanBox"></newmanBox>
	</div>
</template>

<script>
	import newmanBox from './newmanBox.vue'
	export default {
		props:{
			navIndex:{
				type:Number,
				default:0
			},
			navs:{
				type:Array,
				default:[]
			},
			changeNav:{
				type:Function,
			},
		},
		components: {
			newmanBox
		},
		data(){
			return{
				is_show:true,
				
				xianlu:false,
				newmanb:false,
				xl:[],
				baseMS:-1,
				setXl:'',
				baseName:'',
				langName:'',
				langList: [
					// {
					// 	name: '简体中文',
					// 	key: 'cn'
					// },
					{
						name: 'English',
						key: 'en'
					},
					{
						name: 'Português',
						key: 'nl' //葡萄牙语
					},
					// {
					// 	name: 'Việt Nam',
					// 	key: 'vn'  //越南
					// },
					// {
					// 	name: ' عرب . ',
					// 	key: 'al'  //阿拉伯
					// },
					// {
					// 	name: 'भारत',
					// 	key: 'in'  //印度
					// },

				],
				is_lang:false
			}
		},
		created() {
			this.network()
			if(this.$router.history.current.fullPath == '/'){
				this.newmanb = false
			}else{
				this.newmanb = true
			}
		},
		mounted(){
			if(localStorage.getItem("locale")){
				this.langList.forEach((it,index)=>{
					if(it.key==localStorage.getItem("locale")){
						this.langName=it.name;
					}
				})
			}
		},
		methods:{
			changeLang(l,name) {
			  this.$i18n.locale = l;
			  localStorage.setItem("locale",l)
			  this.langName=name
			  this.is_lang=false
			  window.location.reload()
			},
			changeXl(item){
				localStorage.setItem('APIURL',item.url)
				this.baseName = item.name
				this.baseMS = item.ms
				this.xianlu = false
			},
			network(){
				let that = this
				this.xl = JSON.parse(localStorage.getItem('baseURL'))
				let baseUrl = localStorage.getItem('APIURL')
				if(!this.xl) this.xl =[];
				this.xl.forEach((item)=>{
					if(item.url == baseUrl){
						this.baseName = item.name
						that.baseMS = item.ms
					}
				})
				this.$F.network(()=>{},false)
			},
			goRecord(index){
				localStorage.setItem('record_index',index)
				this.$router.push('../../mine/mingxi_record')
			},
			golive(){
				this.$router.push('../../preferential/live')
			},
			goreward(){
				this.$router.push('../../preferential/reward')
			},
			goAbout(){
				this.$router.push('../../mine/about')
			},
			goFanshui(){
				this.$router.push('/preferential/preferential')
			},
			openRenwU(){
				if(!this.newmanb){
					this.$parent.$parent.$parent.opennewmanbox()
				}else{
					this.$refs.newmanBox.openForget()
				}
			},
			godownloadapp(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				let that = this;
				this.$api.ConfigGetConfig({
					key: 'app_down_url',
				}, (res) => {
					loading.close()
					if (res.code == 0) {
						window.open(res.data[1].value.app_link)
					} else {
						// this.$message.error(res.msg);
					}
				})
			},
			gokefu(){
				this.$router.push('/index/sevCus')
			},
			gopromotion(){
				this.$router.push('../../mine/promotion')
			},
			openMenus(){
				this.is_show = true
			},
			closeMenus(){
				this.is_show = false
			},
		}
	}
</script>

<style scoped>
	*{
		box-sizing: border-box;
	}
	.box{
		width: 231px;
		height: calc(100vh - 62px);
		overflow-y: scroll;
		background: var(--theme-main-bg-color);
		position: relative;
		transition: all 0.5s;
		padding: 11px;
		padding-bottom: 0;
	}
	.box::-webkit-scrollbar {display:none}
	.navs{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row;
	}
	.navs_list{
		border-radius: 7px;
		cursor: pointer;
		font-size: 12px;
		height:59px;
		max-width: 96px;
		width: 96px;
		background: var(--theme-side-menu-btn-color);
		margin-bottom: 8px;
		padding-top: 4px;
	}
	.navs_list .icons{
		width: 35px;
		height: 30px;
		font-size: 34px;
		display: block;
		margin: 0 auto;
		color: var(--theme-text-color);
		text-align: center;
	}
	.navs_list img {
	    display: block;
	    margin: 0 auto;
	    width: 35px;
	    height: 30px;
	    color: var(--theme-text-color);
	}
	.navs .navs_list.active{
		background-color: var(--theme-primary-color);
	}
	.navs .active span {
	    color: #ffffff;
	}
	.navs span {
	    color: var(--theme-text-color);
		text-align: center;
		display: block;
		padding-top: 5px;
	}
	/* .navs .navs_list:last-child img{
		width: 17px;
		height: 22px;
	} */
	.navs .navs_list:last-child .span {
		padding-top: 0;
	}
	.toulog{
		width: 100%;
		height: 47px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: var(--theme-side-menu-btn-color);
		border-radius: 5px;
		color: var(--theme-text-color);
		cursor: pointer;
		font-size: 15px;
	}
	.toulog .icons{
		margin: 0 20px;
		font-size: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.market {
		display: flex;
		flex-wrap: wrap;
		margin-top: 7px;
		margin-bottom: 3px;
		flex-direction: row;
		justify-content: space-between;
		background-color: var(--theme-side-menu-btn-color);
		border-radius: 5px;
		padding: 8px;
	}
	.market .items{
		cursor: pointer;
		margin-bottom: 14px;
		width: 86px;
		height: 50px;
		position: relative;
	}
	.market .items img {
		width: 86px;
		position: absolute;
		z-index: 1;
	}
	.market .items span {
		font-size: 12px;
		left: 6px;
		max-width: 55px;
		top: 6px;
		word-wrap: break-word;
		color: #fff;
		display: inline-block;
		position: absolute;
		z-index: 2;
	}
	.market .itemsrow{
		width:100%;
		cursor: pointer;
		margin-bottom: 7px;
		height: 47px;
		position: relative;
	}
	.market .itemsrow img {
		width: 100%;
		position: absolute;
		z-index: 1;
	}
	.market .itemsrow span{
		width:70%;
		height: 47px;
		line-height: 47px;
		text-align: center;
		top: 0;
		padding-left: 9px;
		position: absolute;
		z-index: 2;
		color: #fff;
		font-size: 15px;
		overflow: hidden;
	}
	.abouts .items{
		cursor: pointer;
		font-size: 12px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.abouts .items .i{
		width: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.abouts .items i{
		align-items: center;
		background: var(--theme-alt-neutral-2);
		border-radius: 50%;
		font-size: 19px;
		display: block;
		width: 20px;
		height: 20px;
		color: var(--theme-main-bg-color);
	}
	.abouts .items:hover i{
		background: var(--theme-primary-color);
		color: #fff;
	}
	.abouts .items span{
		color: var(--theme-alt-neutral-2);
		font-size: 14px;
		margin-left:12px;
	}
	.abouts .items:hover span{
		color: var(--theme-primary-color);
	}
	.abouts .item{
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.abouts .item .left{
		width: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.abouts .item .left .leftcon{
		display: flex;
		align-items: baseline;
		justify-content: flex-start;
	}
	.abouts .item .left .leftcon div:first-child{
		height: 6px;
		margin-right: 2.5px;
		border-radius: 5px;
		width: 4px;
		background: rgb(4, 190, 2);
	}
	.abouts .item .left .leftcon div:nth-child(2){
		height: 9px;
		margin-right: 2.5px;
		border-radius: 5px;
		width: 4px;
		background: rgb(4, 190, 2);
	}
	.abouts .item .left .leftcon div:last-child{
		height: 12px;
		margin-right: 2.5px;
		border-radius: 5px;
		width: 4px;
		background: rgb(4, 190, 2);
	}
	.leftcontext{
		margin-top: 2px;
		font-size: 12px;
		transform: scale(.6);
	}
	.abouts .item .right{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: var(--theme-alt-neutral-2);
		font-size: 14px;
		margin-left:12px;
	}
	.abouts .item .right i{
		color: var(--theme-alt-neutral-2);
		font-size: 12px;
	}
	
	.regBox{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 997;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.regBox .conbox{
		width: 433px;
		height: auto;
		background-color: var(--theme-top-nav-bg);;
		border: thin solid;
		border-color: var(--theme-color-line);
		border-radius: 10px;
		position: relative;
		padding: 0 23px 15px 23px;
	}
	.regBox .close{
		color: var(--theme-text-color);
		font-size: 12px;
		height: 44px;
		line-height: 44px;
		width: 44px;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
		cursor: pointer;
	}
	.regBox .title{
		margin-top: 15px;
		margin-bottom: 31px;
		font-size: 17px;
		color: #fff;
		font-weight: 700;
		text-align: center;
	}
	.regBox li{
		width: 100%;
		height: 65px;
		display:flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid var(--theme-color-line);
	}
	.regBox li:first-child{
		border-top: 1px solid var(--theme-color-line);
	}
	.regBox ul{
		max-height: 265px;
		overflow-y: scroll;
	}
	.regBox ul::-webkit-scrollbar {
		display: none; /* Chrome Safari */
	}
	.zzcleft{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.WrpyHI6m9kBJOubBqrlt{
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
	}
	.WrpyHI6m9kBJOubBqrlt div:first-child{
		height: 6px;
		margin-right: 2.5px;
		border-radius: 5px;
		width: 4px;
		background: rgb(4, 190, 2);
	}
	.WrpyHI6m9kBJOubBqrlt div:nth-child(2){
		height: 9px;
		margin-right: 2.5px;
		border-radius: 5px;
		width: 4px;
		background: rgb(4, 190, 2);
	}
	.WrpyHI6m9kBJOubBqrlt div:last-child{
		height: 12px;
		margin-right: 2.5px;
		border-radius: 5px;
		width: 4px;
		background: rgb(4, 190, 2);
	}
	.zzctext3{
		color: #fff;
		margin-left: 15px;
		font-size: 14px;
	}
	.zzcright{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.Aw1MMVHkyunO1popQHyi{
		height: 21px;
		margin-left: 15px;
		width: 21px;
		border:1px solid var(--theme-color-line);
		border-radius: 50%;
	}
	.l_Nn6lrPLPblbHbiULsf{
		align-items: center;
		display: flex;
		font-size: 13px;
		justify-content: center;
		line-height: 21px;
		background-color: var(--theme-primary-color);
		color: #fff;
	}
	.zzcbtn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}
	.zzcbtn2 {
		background-color: var(--theme-primary-color);
		border-color: var(--theme-primary-color);
		color: #ffffff;
		font-size: 14px;
		height: 35px;
		line-height: 35px;
		flex: 1;
		border-radius: 7px;
		cursor: pointer;
	}
</style>